import React, { Component } from "react";
// import {
//   createAddAction,
//   createDeleteAction,
//   createAsyncAddAction,
// } from "../../redux/count_action";

/**
 *  1、由于props中有store属性，所以理论上也可以直接使用
 *  2、理论上UI组件不使用redux的api，只负责页面的呈现、交互等。容器组件负责和redux通信。
 *    - 所以一般使用方法二
 *  3、如何创建一个容器组件---靠react-redux的connect函数
 *    - connect(mapStateToProps,mapDispatchToProps)(UI组件)
 *      - mapStateToProps：映射状态，返回值是一个对象
 *      - mapDispatchToProps：映射操作状态的方法，返回值是一个对象
 *      - 容器组件包裹着UI组件
 *  4、容器组件中的store是靠props传进去的，而不是在容器组件中直接引入
 */
export default class Count extends Component {
  add = () => {
    // 写法一：
    // this.props.store.dispatch(createAddAction(1));
    // 写法二：
    this.props.add(1);
  };
  delete = () => {
    // 写法一：
    // this.props.store.dispatch(createDeleteAction(1));
    // 写法二：
    this.props.delete(1);
  };
  ayncAdd = () => {
    // 写法一：
    // this.props.store.dispatch(createAsyncAddAction(2, 1000));
    // 写法二：
    this.props.asyncAdd(2, 1000);
  };
  render() {
    // console.log(store.getState());
    console.log("props:", this.props);
    return (
      <div>
        {/* 
          写法一：
          Count的值：{this.props.store.getState()} 
        */}
        Count的值：{this.props.count}
        <hr></hr>
        <button onClick={this.add}>+</button>
        <button onClick={this.delete}>-</button>
        <button onClick={this.ayncAdd}>异步＋2</button>
      </div>
    );
  }
}
